<template>
  <div class="app-container machineContainer">
    <div class="customContainer">
      <!-- 搜索头 -->
      <el-form :inline="true" :model="formInline" class="demo-form-inline" size="small">
        <el-form-item>
          <el-date-picker
            :editable="false"
            :clearable="false"
            v-model="pickerDate"
            value-format="yyyy.MM.dd"
            type="daterange"
            align="right"
            unlink-panels
            range-separator="-"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :picker-options="pickerOptions"
            style="width:240px"
          ></el-date-picker>
        </el-form-item>
        <el-form-item>
          <dj-button size="small" @search="searchClick">
            <template #default>搜索</template>
          </dj-button>
        </el-form-item>
      </el-form>
      <div class="device_info_title">
        <span>{{formInline.name}}</span>
        <span>{{formInline.area_name}} - {{formInline.type_name}} - {{formInline.no}}</span>
        <span>ID：{{formInline.id}}</span>
      </div>
      <!-- 列表 -->
      <el-table
        highlight-current-row
        :data="list"
        v-loading.body="listLoading"
        border
        size="small"
        show-summary
        :summary-method="getSummaries"
      >
        <el-table-column align="center" label="操作类型">
          <template slot-scope="scope">清币</template>
        </el-table-column>
        <el-table-column align="center" label="操作前库存" width="200" prop="before_coins"></el-table-column>
        <el-table-column align="center" label="清币数" prop="adjust_val1"></el-table-column>
        <el-table-column align="center" label="清币差异" prop="different_coins">
          <template slot-scope="scope">
            <span
              :class="scope.row.different_coins==0?'':scope.row.different_coins>0?'success':'danger'"
            >{{scope.row.different_coins}}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="操作时间" prop="time"></el-table-column>
        <el-table-column align="center" label="操作员工" prop="nick"></el-table-column>
      </el-table>
    </div>

    <!-- 自定义底部 -->
    <div class="bottom_box">
      <el-pagination
        class="pull-left"
        background
        @current-change="handleCurrentChange"
        :current-page.sync="currentPage"
        :page-size="20"
        layout="prev, pager, next, jumper"
        :total="totalDataNumber"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
import { getList } from "@/api/operation/deviceInfo";
import { pickerOptionsF, pickerDateF, optionMaxTime } from "@/utils";
export default {
  data() {
    return {
      list: null,
      listLoading: false,
      isAmend: false,
      currentPage: 1,
      totalDataNumber: 0,
      formInline: {
        id: "",
        store_id: "",
        area_id: "",
        type_id: 0,
        start_time: "",
        end_time: "",
        page: 0,
      },
      pickerOptions: pickerOptionsF(),
      pickerDate: [],
      //addEditDialog: false,
    };
  },
  methods: {
    // 搜索
    searchClick() {
      optionMaxTime(this.pickerDate).then(() => {
        //最大可选择时间区间
        this.fetchData();
      });
    },
    // 列表获取
    fetchData() {
      this.listLoading = true;
      this.currentPage = 1;
      this.formInline.start_time = this.pickerDate[0].replace(/\./g, "-");
      this.formInline.end_time = this.pickerDate[1].replace(/\./g, "-");
      //console.log(this.formInline)
      getList({
        store_id: this.formInline.store_id,
        area_id: this.formInline.area_id,
        type_id: this.formInline.type_id,
        start_time: this.formInline.start_time,
        end_time: this.formInline.end_time,
        page: this.formInline.page,
        machine_id: this.formInline.id,
      })
        .then((res) => {
          //console.log(res)
          if (res.code == 1) {
            this.allList = res.message.list[0].clear_coins_info;
            this.totalDataNumber = this.allList.length;
            if (this.totalDataNumber <= 20) {
              this.list = this.allList;
            } else {
              this.list = this.allList.slice(0, 20);
            }
          }
          this.listLoading = false;
        })
        .catch((res) => {
          this.listLoading = false;
        });
    },
    // 分页
    handleCurrentChange(val) {
      this.listLoading = true;
      this.formInline.page = val - 1;
      this.list = this.allList.slice(this.formInline.page * 20, val * 20);
      this.listLoading = false;
    },
    getData() {
      this.formInline = JSON.parse(JSON.stringify(this.$route.params.data));
      this.formInline.page = 0;
      this.$set(this.pickerDate, 0, this.formInline.start_time);
      this.$set(this.pickerDate, 1, this.formInline.end_time);
      this.fetchData();
      //console.log(this.formInline)
    },
    //合计
    getSummaries(param) {
      //console.log(param);
      const { columns, data } = param;
      const sums = [];
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = "本页合计";
          return;
        }
        if (index === 1 || index === 4 || index === 5) {
          sums[index] = "-";
          return;
        }
        const values = data.map((item) => Number(item[column.property]));
        //console.log(values)
        if (!values.every((value) => isNaN(value))) {
          sums[index] = values.reduce((prev, curr) => {
            const value = Number(curr);
            if (!isNaN(value)) {
              return prev + curr;
            } else {
              return prev;
            }
          }, 0);
        }
      });
      return sums;
    },
  },
  activated() {
    if (
      this.$route.params.data &&
      (this.$route.params.data.id != this.formInline.id ||
        this.$route.params.data.start_time != this.formInline.start_time ||
        this.$route.params.data.end_time != this.formInline.end_time)
    )
      this.getData();
  },
};
</script>
